﻿<!DOCTYPE html>
<html>
<head>
    <META HTTP-EQUIV="Content-Type" CONTENT="text/html; charset=utf-8">
	<title>cardistry</title>
	<link rel="stylesheet" href="css/reset.css" />
	<link rel="stylesheet" href="css/iconfont.css" />
	<link rel="stylesheet" href="css/style.css" />
</head>
<body>



<div class="header">
	<a href="" class="h-logo"></a>
	<ul class="h-nav">
		<li><a href="index.html"><span class="icon">&#xe600;</span>首页</a></li>
		<li  class="on"><a href="square.html"><span class="icon">&#xe607;</span>广场</a></li>
		<!-- <li><a href=""><span class="icon">&#xe603;</span>挑战</a></li> -->
		<li><a href="learn.html"><span class="icon">&#xe604;</span>教学</a></li>
		<!-- <li><a href=""><span class="icon">&#xe606;</span>纸牌</a></li> -->
	</ul>
	<div class="h-func">
		<a href=""><span class="icon">&#xe616;</span>zhangbo8264</a>
		<a href="" id="identification"><span class="icon">&#xe615;</span>资深认证</a>
		<a href="" id="logIn"><span class="icon">&#xe61b;</span>登陆</a>
		<a href="" id="register"><span class="icon">&#xe61c;</span>注册</a>
		<!-- <a href=""><span class="icon">&#xe623;</span></a> -->
	</div>
</div>


<div class="funcNav">
	<ul>
		<li><a href="javascript:void(0)"><span class="icon">&#xe609;</span><strong>我的作品</strong></a></li>
		<li><a href="javascript:void(0)"><span class="icon">&#xe61d;</span><strong>我的收藏</strong></a></li>
		<li><a href="javascript:void(0)"><span class="icon">&#xe61f;</span><strong>创作</strong></a></li>
	</ul>
</div>

<div class="content">
	
	<div class="timeline">
		<ul class="clearfix">
			<li class="tl-time">
				<b></b>
				<span>2014年9月</span>
			</li>
			<li>
				<a href="" class="user-photo"><img src="images/4.jpg" /></a>
				<span class="icon tl-type" >&#xe60a;</span>
				<div class="ui-article">
					<a href="" class="ui-article-a clearfix">
						<img src="images/1.jpg" />
						<strong>文章标题</strong>
						<span>ULMEN 审判由 13个挑战项目所组成。每个项目都是由一些想挑战这个审判的高手和挑战高难度花式玩牌技巧的人想象出来的。完成审判的奖要先拿到Ulmen4大奖章和达到他们的 "主人" 的水平。</span>
					</a>
				</div>
				<div class="ui-func clearfix">
					<a href="" class="icon">&#xe61f;</a>
					<a href="" class="icon">&#xe627;</a>
				</div>
			</li>
			<li>
				<a href="" class="user-photo"><img src="images/3.jpg" /></a>
				<span class="icon tl-type" >&#xe613;</span>
				<div class="ui-video">
					<a href="" class="ui-video-a">
						<div class="relative"><img src="images/1.jpg"><i></i></div>
						<strong>视频标题</strong>
					</a>
				</div>
				<div class="ui-func clearfix">
					<a href="" class="icon">&#xe61d;</a>
					<a href="" class="icon">&#xe624;</a>
				</div>
			</li>
			<li>
				<a href="" class="user-photo"><img src="images/4.jpg" /></a>
				<span class="icon tl-type" >&#xe60a;</span>
				<div class="ui-article">
					<a href="" class="ui-article-a clearfix">
						<strong>文章标题</strong>
						<span>ULMEN 审判由 13个挑战项目所组成。每个项目都是由一些想挑战这个审判的高手和挑战高难度花式玩牌技巧的人想象出来的。完成审判的奖要先拿到Ulmen4大奖章和达到他们的 "主人" 的水平。</span>
					</a>
				</div>
				<div class="ui-func clearfix">
					<a href="" class="icon">&#xe61d;</a>
					<a href="" class="icon">&#xe624;</a>
				</div>
			</li>
			<li class="tl-time">
				<b></b>
				<span>2014年9月</span>
			</li>
			<li>
				<a href="" class="user-photo"><img src="images/4.jpg" /></a>
				<span class="icon tl-type" >&#xe60a;</span>
				<div class="ui-article">
					<a href="" class="ui-article-a clearfix">
						<img src="images/1.jpg" />
						<strong>文章标题</strong>
						<span>ULMEN 审判由 13个挑战项目所组成。每个项目都是由一些想挑战这个审判的高手和挑战高难度花式玩牌技巧的人想象出来的。完成审判的奖要先拿到Ulmen4大奖章和达到他们的 "主人" 的水平。</span>
					</a>
				</div>
				<div class="ui-func clearfix">
					<a href="" class="icon">&#xe61f;</a>
					<a href="" class="icon">&#xe627;</a>
				</div>
			</li>
			<li>
				<a href="" class="user-photo"><img src="images/3.jpg" /></a>
				<span class="icon tl-type" >&#xe613;</span>
				<div class="ui-video">
					<a href="" class="ui-video-a">
						<div class="relative"><img src="images/1.jpg"><i></i></div>
						<strong>视频标题</strong>
					</a>
				</div>
				<div class="ui-func clearfix">
					<a href="" class="icon">&#xe61d;</a>
					<a href="" class="icon">&#xe624;</a>
				</div>
			</li>
			<li>
				<a href="" class="user-photo"><img src="images/4.jpg" /></a>
				<span class="icon tl-type" >&#xe60a;</span>
				<div class="ui-article">
					<a href="" class="ui-article-a clearfix">
						<strong>文章标题</strong>
						<span>ULMEN 审判由 13个挑战项目所组成。每个项目都是由一些想挑战这个审判的高手和挑战高难度花式玩牌技巧的人想象出来的。完成审判的奖要先拿到Ulmen4大奖章和达到他们的 "主人" 的水平。</span>
					</a>
				</div>
				<div class="ui-func clearfix">
					<a href="" class="icon">&#xe61d;</a>
					<a href="" class="icon">&#xe624;</a>
				</div>
			</li>
			
		</ul>
	</div>

	<div class="publish">
		<ul class="publish-nav clearfix">
			<li><a href="javascript:void(0)"><span class="icon">&#xe60a;</span>文章</a></li>
			<li><a href="javascript:void(0)"><span class="icon">&#xe613;</span>视频</a></li>
			<li><a href="javascript:void(0)"><span class="icon">&#xe610;</span>链接</a></li>
			<li><a href="javascript:void(0)"><span class="icon">&#xe612;</span>讨论</a></li>
		</ul>
		<div class="publish-form">
			<p class="publish-form-help">请选择你要创建的作品类型</p>
			<p class="publish-form-need">资深玩家权限，您需要先认证资深玩家 
				<a href=""><span class="icon">&#xe615;</span>立即认证</a>
			</p>
		</div>
	</div>
</div>
<div class="popup popup-opus">
	<div class="popup-inner clearfix">
		<div class="article"></div>
		<!-- <div class="video">
			<embed src="http://player.youku.com/player.php/sid/XMjAzMjE1MTQw/v.swf" allowFullScreen="true" quality="high" width="580" height="500" align="middle" allowScriptAccess="always" type="application/x-shockwave-flash"></embed>
		</div> -->
		<div class="discuss">
			<ul class="discuss-tab clearfix">
				<li  class="on"><a href="">我的交流<em>(0)</em></a></li>
				<li><a href="">全部交流<em>(300)</em></a></li>
			</ul>
			<div class="discuss-mydiscuss">
				<div class="discuss-form clearfix">
					<textarea>新建一个交流</textarea>
					<p><a href="">发送</a><span>你还可以输入500字</span></p>
				</div>
				
				<div class="discuss-cont">
					<div class="discuss-you discuss-you-globle  clearfix">
						<a href="" class="discuss-photo "><img src="images/4.jpg" /></a>
						<p class="discuss-time">username 16:20</p>
						<p class="discuss-message">你好</p>
						<p class="discuss-func"><a href=""><span class="icon">&#xe621;</span>回复<span class="discuss-num">(0)</span></a></p>
					</div>
					<ul class="discuss-cont-inner">
						<li class="discuss-more">
							<a href="">显示更早的20条回复</a>
						</li>
						<li class="discuss-you clearfix">
							<a href="" class="discuss-photo"><img src="images/4.jpg" /></a>
							<p class="discuss-time">16:20</p>
							<p class="discuss-message">你好</p>
						</li>
						<li class="discuss-me clearfix">
							<a href="" class="discuss-photo"><img src="images/4.jpg" /></a>
							<p class="discuss-time">2013-05-10 16:20</p>
							<p class="discuss-message">我想和你交个朋友我想和你交个朋友我想和你交个朋友我想和你交个朋友我想和你交个朋友我想和你交个朋友我想和你交个朋友我想和你交个朋友我想和你交个朋友我想和你交个朋友我想和你交个朋友我想和你交个朋友我想和你交个朋友我想和你交个朋友我想和你交个朋友我想和你交个朋友我想和你交个朋友我想和你交个朋友我想和你交个朋友我想和你交个朋友</p>
						</li>
						<li class="discuss-me clearfix">
							<a href="" class="discuss-photo"><img src="images/4.jpg" /></a>
							<p class="discuss-time">2013-05-10 16:20 作者</p>
							<p class="discuss-message">你好,我想和你交个朋友</p>
						</li>
						<li class="discuss-you clearfix">
							<a href="" class="discuss-photo"><img src="images/4.jpg" /></a>
							<p class="discuss-time">username 16:20</p>
							<p class="discuss-message">sb</p>
						</li>
						<li class="discuss-you clearfix">
							<a href="" class="discuss-photo"><img src="images/4.jpg" /></a>
							<p class="discuss-time">16:20</p>
							<p class="discuss-message">你好</p>
						</li>
						<li class="discuss-me clearfix">
							<a href="" class="discuss-photo"><img src="images/4.jpg" /></a>
							<p class="discuss-time">16:20</p>
							<p class="discuss-message">你好</p>
						</li>
						<li class="discuss-form clearfix">
							<textarea>回复</textarea>
							<p><a href="">发送</a><span>你还可以输入500字</span></p>
						</li>
					</ul>
				</div>
			</div>
			<div class="discuss-alldiscuss"  style="display:none;">
				<div class="discuss-more"  style="border-top:none;"><a href="">显示更早的20条交流</a></div>
				<div class="discuss-cont">
					<div class="discuss-you discuss-you-globle  clearfix">
						<a href="" class="discuss-photo "><img src="images/4.jpg" /></a>
						<p class="discuss-time">username 16:20</p>
						<p class="discuss-message">你好</p>
						<p class="discuss-func"><a href=""><span class="icon">&#xe621;</span>回复<span class="discuss-num">(0)</span></a></p>
					</div>
					<ul class="discuss-cont-inner">
						<li class="discuss-form clearfix">
							<textarea>回复</textarea>
							<p><a href="">发送</a><span>你还可以输入500字</span></p>
						</li>
					</ul>
				</div>
				<div class="discuss-cont">
					<div class="discuss-you discuss-you-globle  clearfix">
						<a href="" class="discuss-photo "><img src="images/4.jpg" /></a>
						<p class="discuss-time">username 16:20</p>
						<p class="discuss-message">你好</p>
						<p class="discuss-func"><a href=""><span class="icon">&#xe621;</span>回复<span class="discuss-num">(0)</span></a></p>
					</div>
					<ul class="discuss-cont-inner">
						<li class="discuss-you clearfix">
							<a href="" class="discuss-photo"><img src="images/4.jpg" /></a>
							<p class="discuss-time">16:20</p>
							<p class="discuss-message">你好</p>
						</li>
						<li class="discuss-me clearfix">
							<a href="" class="discuss-photo"><img src="images/4.jpg" /></a>
							<p class="discuss-time">2013-05-10 16:20</p>
							<p class="discuss-message">我想和你交个朋友我想和你交个朋友我想和你交个朋友我想和你交个朋友我想和你交个朋友我想和你交个朋友我想和你交个朋友我想和你交个朋友我想和你交个朋友我想和你交个朋友我想和你交个朋友我想和你交个朋友我想和你交个朋友我想和你交个朋友我想和你交个朋友我想和你交个朋友我想和你交个朋友我想和你交个朋友我想和你交个朋友我想和你交个朋友</p>
						</li>
						<li class="discuss-form clearfix">
							<textarea>回复</textarea>
							<p><a href="">发送</a><span>你还可以输入500字</span></p>
						</li>
					</ul>
				</div>
				<div class="discuss-cont">
					<div class="discuss-you discuss-you-globle  clearfix">
						<a href="" class="discuss-photo "><img src="images/4.jpg" /></a>
						<p class="discuss-time">username 16:20</p>
						<p class="discuss-message">你好</p>
						<p class="discuss-func"><a href=""><span class="icon">&#xe621;</span>回复<span class="discuss-num">(0)</span></a></p>
					</div>
					<ul class="discuss-cont-inner">
						<li class="discuss-you clearfix">
							<a href="" class="discuss-photo"><img src="images/4.jpg" /></a>
							<p class="discuss-time">16:20</p>
							<p class="discuss-message">你好</p>
						</li>
						<li class="discuss-me clearfix">
							<a href="" class="discuss-photo"><img src="images/4.jpg" /></a>
							<p class="discuss-time">2013-05-10 16:20</p>
							<p class="discuss-message">我想和你交个朋友我想和你交个朋友我想和你交个朋友我想和你交个朋友我想和你交个朋友我想和你交个朋友我想和你交个朋友我想和你交个朋友我想和你交个朋友我想和你交个朋友我想和你交个朋友我想和你交个朋友我想和你交个朋友我想和你交个朋友我想和你交个朋友我想和你交个朋友我想和你交个朋友我想和你交个朋友我想和你交个朋友我想和你交个朋友</p>
						</li>
						<li class="discuss-form clearfix">
							<textarea>回复</textarea>
							<p><a href="">发送</a><span>你还可以输入500字</span></p>
						</li>
					</ul>
				</div>
				<div class="discuss-cont">
					<div class="discuss-you discuss-you-globle  clearfix">
						<a href="" class="discuss-photo "><img src="images/4.jpg" /></a>
						<p class="discuss-time">username 16:20</p>
						<p class="discuss-message">你好</p>
						<p class="discuss-func"><a href=""><span class="icon">&#xe621;</span>回复<span class="discuss-num">(0)</span></a></p>
					</div>
					<ul class="discuss-cont-inner">
						<li class="discuss-you clearfix">
							<a href="" class="discuss-photo"><img src="images/4.jpg" /></a>
							<p class="discuss-time">16:20</p>
							<p class="discuss-message">你好</p>
						</li>
						<li class="discuss-me clearfix">
							<a href="" class="discuss-photo"><img src="images/4.jpg" /></a>
							<p class="discuss-time">2013-05-10 16:20</p>
							<p class="discuss-message">我想和你交个朋友我想和你交个朋友我想和你交个朋友我想和你交个朋友我想和你交个朋友我想和你交个朋友我想和你交个朋友我想和你交个朋友我想和你交个朋友我想和你交个朋友我想和你交个朋友我想和你交个朋友我想和你交个朋友我想和你交个朋友我想和你交个朋友我想和你交个朋友我想和你交个朋友我想和你交个朋友我想和你交个朋友我想和你交个朋友</p>
						</li>
						<li class="discuss-form clearfix">
							<textarea>回复</textarea>
							<p><a href="">发送</a><span>你还可以输入500字</span></p>
						</li>
					</ul>
				</div>
			</div>
		</div>
	</div>
	<a href="javascript:void(0)" class="popup-close icon">&#xe61e;</a>
</div>

<div class="popup popup-login">
	<div class="popup-inner">
		<div class="ui-confirm clearfix">
			<h1 class="ui-confirm-title"><span>Cardistry</span>.cn</h1>
			<p class="ui-confirm-des">请使用nowayker账号登陆：<a href=""><span class="icon">&#xe61c;</span>注册</a></p>
			<form>
				<p class="ui-input">
					<span class="icon">&#xe62e;</span>
					<label for="loginemail">账号</label>
					<input type="text" id="loginemail" class="inputlabel"/>
				</p>
				<p class="ui-input">
					<span class="icon">&#xe62c;</span>
					<label for="loginpw">密码</label><input type="password" id="loginpw" class="inputlabel"/>
				</p>
				<!-- <p class="ui-error"><span class="icon">&#xe61e;</span>账号密码不匹配！</p> -->
				<p class="clearfix">
					<a href="" class="ui-confirm-forget"><span class="icon">&#xe62d;</span>忘记密码</a>
					<a href="" class="ui-confirm-submit">登&nbsp;陆</a>
				</p>
			</from>
		</div>
	</div>
	<a href="javascript:void(0)" class="popup-close icon">&#xe61e;</a>
</div>
<div class="popup popup-register">
	<div class="popup-inner">
		<div class="ui-confirm clearfix">
			<h1 class="ui-confirm-title">注册账号</h1>
			<p class="ui-confirm-des">请填写必要信息：</p>
			<form>
				<p class="ui-input">
					<span class="icon">&#xe62e;</span>
					<label for="loginemail">账号</label>
					<input type="text" id="loginemail" class="inputlabel"/>
				</p>
				<p class="ui-input">
					<span class="icon">&#xe603;</span>
					<label for="loginname">用户名</label>
					<input type="text" id="loginname" class="inputlabel"/>
				</p>
				<p class="ui-input">
					<span class="icon">&#xe62c;</span>
					<label for="loginpw">密码</label><input type="password" id="loginpw" class="inputlabel"/>
				</p>
				<p class="ui-input">
					<span class="icon">&#xe62c;</span>
					<label for="confirmpw">确认密码</label><input type="password" id="confirmpw" class="inputlabel"/>
				</p>
				<p class="ui-input">
					<span class="icon">&#xe61c;</span>
					<label for="loginemail">内测邀请码</label>
					<input type="text" id="loginemail" class="inputlabel"/>
				</p>
				<!-- <p class="ui-error"><span class="icon">&#xe61e;</span>账号密码不匹配！</p> -->
				<p class="clearfix">
					<a href="" class="ui-confirm-forget"><span class="icon">&#xe62d;</span>如何获取内测邀请码</a>
					<a href="" class="ui-confirm-submit">注&nbsp;册</a>
				</p>
			</from>
		</div>
	</div>
	<a href="javascript:void(0)" class="popup-close icon">&#xe61e;</a>
</div>
<div class="popup popup-identification">
	<div class="popup-inner">
		<div class="ui-confirm clearfix">
			<h1 class="ui-confirm-title">资深玩家认证</h1>
			<p class="ui-confirm-des">请输入邀请码：</p>
			<form>
				<p class="ui-input">
					<span class="icon">&#xe62c;</span>
					<label for="loginemail">邀请码</label>
					<input type="text" id="loginemail" class="inputlabel"/>
				</p>
				<p class="ui-confirm-btn clearfix">
					<a href="" class="ui-confirm-forget"><span class="icon">&#xe62d;</span>如何获得邀请码？</a>
					<a href="" class="ui-confirm-submit">提&nbsp;交</a>
				</p>
			</from>
		</div>
	</div>
	<a href="javascript:void(0)" class="popup-close icon">&#xe61e;</a>
</div>
<!-- <div class="personalcard">
	<div class="pcd-l">
		<a href="" class="pcd-photo">
			<img src="images/150.png">
		</a>
		<div class="pcd-num">
			<a href="javascript:void(0)">
				<strong>32</strong>
				<span>排名</span>
			</a>
			<a href="javascript:void(0)">
				<strong>9</strong>
				<span>作品</span>
			</a>
		</div>
	</div>
	<div class="pcd-r">
		<span class="pcd-name">用户名</span>
		<span class="pcd-info">我在：中国 北京</span>
		<span class="pcd-info">签名：（未设置任何签名）</span>
		<div class="pcd-func">
			<a href="">查看他的作品</a>
		</div>
	</div>
	<div class="pcd-clear"></div>
	<div class="pcd-rank"></div>
	<div class="pcd-arrow-top"></div>
	<div class="pcd-arrow-bottom"></div>
</div> -->
<div class="tip">
	<div class="tip-line">
		<a href=""><span class="icon">&#xe60e;</span>您有个人信息需要完善！</a>
		<b class="icon">&#xe61e;</b>
	</div>
	<div class="tip-line">
		<a href=""><span class="icon">&#xe62e;</span>您有3条新消息</a>
		<b class="icon">&#xe61e;</b>
	</div>
</div>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript">

	$('.funcNav li a').click(function(){
		$(this).parent().parent().find('li').removeClass('on');
		$(this).parent().addClass('on');
	})
	$('.publish-nav li a').click(function(){
		$(this).parent().parent().find('li').removeClass('on');
		$(this).parent().addClass('on');
	})

	$(".discuss-tab li a").click(function(){
		var index=$(this).parent().index();
		$('.discuss-tab li').removeClass('on');
		$(this).parent().addClass('on');

		$('.discuss-mydiscuss').hide();
		$('.discuss-alldiscuss').hide();
		if(index==0){
			$('.discuss-mydiscuss').show();
		}else{
			$('.discuss-alldiscuss').show();
		}

		return false;
	});

	$('.discuss-func a').toggle(function(){
		$(this).parent().parent().next().slideDown();
		return false;
	},function(){
		$(this).parent().parent().next().slideUp();
		return false;
	})

	$('.ui-article').click(function(){
		$('.popup-opus').show();
		$('html').css('overflow','hidden');
		return false;
	})
	$('.ui-video').click(function(){
		$('.popup-opus').show();
		$('html').css('overflow','hidden');
		return false;
	})
	$('.popup-close').click(function(){
		$('.popup').hide();
		$('html').css('overflow','auto');
		return false;
	})

	$('#logIn').click(function(){
		$('.popup-login').show();
		$('html').css('overflow','hidden');
		return false;
	})
	$('#identification').click(function(){
		$('.popup-identification').show();
		$('html').css('overflow','hidden');
		return false;
	})
	$('#register').click(function(){
		$('.popup-register').show();
		$('html').css('overflow','hidden');
		return false;
	})

</script>
</body>
</html>